<!DOCTYPE html>
<html lang="en" class="x-admin-sm">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>新增商品信息</title>
	<link rel="stylesheet" href="./assets/layui/css/layui.css" media="all" />
	<script type="text/javascript" src="./assets/layui/layui.js"></script>
</head>

<body class="childrenBody">
	<div id="app">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>新增商品信息</legend>
		</fieldset>
		<div class="layui-form" style="width: 80%;">
			<div class="layui-form-item"><label class="layui-form-label">生鲜名称</label>
				<div class="layui-input-block"><input type="text" class="layui-input" id="goodsname" v-model="goodsname"
						placeholder="请输入生鲜名称" />
				</div>
			</div>
			<div class="layui-form-item"><label class="layui-form-label">商品类型</label>
				<div class="layui-input-block">
					<select name="cateid" id="cateid" title="商品类型" id="cateid">
					</select>
				</div>
			</div>
			<div class="layui-form-item"><label class="layui-form-label">图片</label>
				<div class="layui-input-block">
					<form id="head-img" enctype="multipart/form-data">
						<input type="file" name="image" id="image" placeholder="请选择图片" />
						<button type="button" class="layui-btn" @click="upload()"><i
								class="layui-icon layui-icon-upload"></i> 上传</button>
					</form>
				</div>
			</div>
			<div class="layui-form-item"><label class="layui-form-label">价格</label>
				<div class="layui-input-block"><input type="text" class="layui-input" id="price" v-model="price"
						placeholder="请输入价格" />
				</div>
			</div>
			<div class="layui-form-item"><label class="layui-form-label">商品介绍</label>
				<div class="layui-input-block">
					<textarea class="layui-input" id="contents" v-model="contents" style="height: 220px;"
						placeholder="请输入商品介绍"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" @click.prevent="save()">提交保存</button>
					<button class="layui-btn" @click.prevent="reset()">取消重置</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="./assets/js/axios.min.js"></script>
	<script type="text/javascript" src="./assets/js/vue.js"></script>
	<script type="text/javascript" src="./assets/js/jquery.min.js"></script>
	<script type="text/javascript">
		const vue = new Vue({ // 实例化Vue对象
			el: '#app', // 绑定作用域
			data: { //定义数据
				goodsname: '', // 定义生鲜名称数据
				cateid: '0', // 定义商品类型数据
				url: '',
				price: '', // 定义价格数据
				contents: '', // 定义商品介绍数据
				sellerid: sessionStorage.getItem('sellerid'),
			},
			methods: {
				upload: function () {
					let _this = this;
					var formData = new FormData($('#head-img')[0]);
					axios.post('http://localhost:8080/vue_gxhfztjxt/ajaxupload/upload.action', formData).then(
						result => {
							_this.url = result.data.url;
							alert("上传成功");
						});
				},
				save: function () {
					let _this = this;
					var data = {
						goodsname: _this.goodsname,
						cateid: $('#cateid').val(),
						image: _this.url,
						price: _this.price,
						contents: _this.contents,
						sellerid: _this.sellerid,
					};
					axios.post('http://localhost:8080/vue_gxhfztjxt/goods/insertGoods.action', data).then(
						result => {
							if (result.data.code > 0) {
								if (window.confirm('保存成功,是否继续添加？')) {
									_this.reset();
								} else {
									var index = parent.layer.getFrameIndex(window.name);
									parent.location.reload();
									parent.layer.close(index);
								}
							} else {
								console.log('保存失败,请稍后再试');
							}
						});
				},
				reset: function () {
					this.pageLoad();
				},
				pageLoad: function () { // 页面加载
					this.goodsname = '';
					this.url = '';
					this.price = '';
					this.contents = '';
					console.log(this.sellerid);
				},
				validate: function () { // 验证输入非空
				},
			},
			created() { // 生命周期相关的函数
				let _this = this;
				layui.use(['element', 'layer', 'form'], function () {
					$ = layui.jquery; // jquery
				});
				axios.get('http://localhost:8080/vue_gxhfztjxt/cate/getAllCate.action').then(result => {
					var myOptions = '<option value="">---请选择商品类型---</option>';
					for (var i = 0; i < result.data.length; i++) {
						myOptions += '<option value="' + result.data[i].cateid + '">' + result.data[i]
							.catename + '</option>';
					}
					$("#cateid").empty();
					$("#cateid").html(myOptions);
				});
				_this.pageLoad();
			},
		})
	</script>

</body>

</html>